<template>
    <div >
        <!-- 顶部 -->
       <TopBar/>
        <!-- 中间 -->
        <div class="main">
            <div class="main-content content">
                <!-- 滑动轮播 -->
                <van-swipe @change="onChange" >
                    <van-swipe-item v-for="(v,i) in arr" :key="i" >
                        <img :src="v.img" alt="" class="main-baneer-img">
                        <div class="main-baneer-photo"><span>相册</span></div>
                    </van-swipe-item>
                </van-swipe>
                <!-- 猫咖文字 -->
                <div class="main-title">
                    <h1>With The Cat  与猫 猫咖</h1>
                </div>
                <!-- 星星 -->
                <div class="main-star">
                    <div class="main-light"><img src="yangchaung/Detimg/star.png" alt=""></div>
                    <div class="main-light"><img src="yangchaung/Detimg/star.png" alt=""></div>
                    <div class="main-light"><img src="yangchaung/Detimg/star.png" alt=""></div>
                    <div class="main-light"><img src="yangchaung/Detimg/star.png" alt=""></div>
                    <div class="main-light"><img src="yangchaung/Detimg/star.png" alt=""></div>
                    <div class="main-score">4.9</div>
                    <div class="main-details">详情<img src="yangchaung/Detimg/yjt.png" alt=""></div>
                    <div class="main-num">589条</div>
                    <div>￥55/人</div>
                </div>
                <!-- 服务分 -->
                <div class="main-serve">
                    <div class="main-serve-left">
                        <div>服务:4.9</div>
                        <div>环境:4.9</div>
                        <div>划算:4.9</div>
                    </div>
                    <div class="main-serve-right">
                        <div class="pet">宠物店</div>
                        <div class="small"><span>小寨</span><img src="yangchaung/Detimg/yjt.png" alt=""></div>
                    </div>
                </div>
                <!-- 榜单 -->
                <div class="main-list">
                    <img src="yangchaung/Detimg/dianping.png" alt="" class="img">
                    <div class="main-name">小寨宠物店好评榜第2名</div>
                </div>
                <!-- 营业时间 -->
                <div class="business-hours">
                    <p class="rest">营业中</p>
                    <p class="time">周一至周日</p>
                    <p >14:00-21:00</p>
                    <p class="rx" @click="funs">热销推荐</p>
                </div>
                <!-- 收录 -->
                <div class="include">
                    <div class="left">
                        <div class="include-three">
                            <p class="three">3</p>
                            <p class="threes">收录3年</p>
                        </div>
                            <p class="food">食品</p>
                            <p class="thing">用品</p>
                            <p class="pet-shop">宠物售卖</p>
                    </div>
                </div>
                <!-- 地址 -->
                <div class="location">
                    <div class="left">
                        <p class="one"> 吉祥村momopark1号楼2单元701</p>
                        <p class="two">距地铁3号线吉祥村地铁站B西南口40m</p>
                    </div>
                    <div class="right">   
                        <img src="yangchaung/Detimg/dh.png" alt="" >
                        <p class="phone">电话</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分隔框 -->
        <div class="divide">
        </div>
        
        <!-- 优惠评价 -->
         <ScorllBar>111</ScorllBar>
        <!-- 查看全部评价 -->
        <van-row type="flex" justify="space-between" class="ask content" @click="jump">
            <van-col span="6">问大家(68)</van-col>
            <van-col span=""><img src="yangchaung/Detimg/yjt.png" alt=""></van-col>
        </van-row>
       <div class="asks content">
        <van-row type="flex" justify="space-between" class="ask content">
            <van-col span="9">猫咖有英短蓝猫吗？</van-col>
            <van-col span="">2个回答</van-col>
        </van-row>
        <van-row type="flex" justify="space-between" class="ask content">
            <van-col span="9">需要打工猫咪</van-col>
            <van-col span="">2个回答</van-col>
        </van-row>
       </div>
       
       <!-- 进入频道 -->
        <div class="channel ">
            <div class="content">
                <div class="contents">
                    <!-- 顶部 -->
                    <van-row type="flex" class="top">
                        <van-col span="2"><img src="yangchaung/Detimg/channel0.png" alt="dog"></van-col>
                        <van-col span="3" class="pet-text">宠物</van-col>
                        <van-col span="9" class="science">科学养宠安心又省心</van-col>
                    </van-row>
                    <!-- 中间 -->
                    <van-row class="middle">
                        <van-col span="8" class="middle-tx">
                            <div class="tops">
                                <img src="yangchaung/Detimg/channel1.png" alt="">
                            </div>
                            <div class="bottoms">
                                <h4>养宠0担忧</h4>
                                <p>体检疫苗保健康</p>
                            </div>
                        </van-col>
                        <van-col span="8" class="middle-tx">
                            <div class="tops">
                                <img src="yangchaung/Detimg/channel2.png" alt="">
                            </div>
                            <div class="bottoms">
                                <h4>爱宠高颜值</h4>
                                <p>洗澡美容更靓丽</p>
                            </div>
                        </van-col>
                        <van-col span="8" class="middle-tx">
                            <div class="tops">
                                <img src="yangchaung/Detimg/channel3.png" alt="">
                            </div>
                            <div class="bottoms">
                                <h4>萌宠集结号</h4>
                                <p>撸宠购宠轻松找</p>
                            </div>
                        </van-col>
                    </van-row>  
                    <van-button type="default">进入频道</van-button>
                </div>
            </div>
        </div>

        <!-- 底部固定栏 -->
        <Bottom-bar/>
        <div class="bottom-bar">
        </div>

    </div>
</template>

<script>
import axios from "axios"
export default {
     data() {
        return {
            arr:[],
            current: 0,
            active: 0,
        }
    },
   created () {
        axios.request("http://localhost:8889/Detimg").then(({data})=>{
            this.arr=data
        })
    },
    methods: {
        onChange(index) {   
      this.current = index;
    },
    jump(){
        this.$router.push("/yacQuestionPage")
    },
     funs(){        
    this.$router.push("/yacRecomPage")
  }
  },
 
}
</script>

<style lang="scss" scoped>
    
    *{
        margin: 0;
        padding: 0;
    }
    .content{
        width: 93.067vw;
        margin: auto;
    }
   
    .main{
        width: 100vw;
        height: 117.733vw;
        .main-content{
            height: 117.733vw;
            position: relative;
            .main-baneer-img{
                width:93.067vw;
                height: 50.133vw;
                border-radius: 1.6vw;
            }
            .main-baneer-photo{
                width: 11.2vw;
                height: 4.267vw;
                background: #251d12;
                color: #fff;
                font-size: 2.667vw;
                border-radius: 10.667vw;
                text-align: center;
                position: absolute; 
                right: 3vw;
                bottom:3vw;
                z-index: 999;
            }
            .main-title{
                margin: 2vw 0 1.75vw 0;
                h1{
                    font-size: 5.067vw;
                }
            }
            .main-star{
                display: flex;
                height: 4.267vw;
                font-size: 3.467vw;
                line-height: 4.267vw;
               
                .main-light{
                    width: 4.267vw;
                    height:4.267vw ;
                    color: #f63;
                    img{
                        width:3.733vw;
                        height: 4.267vw;
                    }
                }
                .main-score{
                    color: #ff6633;
                    font-weight: bolder;
                }
                .main-details,.main-num{
                    margin-right: 3.2vw;
                    margin-left: 3.2vw;
                    position: relative;
                     img{
                        width: 1.6vw;
                        height: 3vw;
                        position: absolute;
                        right: -3vw;
                        bottom: 0.55vw;
                    }
                }
              
            }

            .main-serve{
                display: flex;
                justify-content: space-between;
                margin:1.6vw 0 1.367vw 0 ;
                .main-serve-left{
                    font-size: 3.467vw;
                    display: flex;
                }
                .main-serve-right{
                    font-size: 4vw;
                    display: flex;
                    .pet{
                        margin-right: 2.133vw;
                    }
                    img{
                        width: 1.6vw;
                        height: 3vw;
                    }
                    .small span{
                        margin-right: 2.133vw;
                    }
                   
                }
            }

            .main-list{
                display: flex;
                height: 8.333vw;
                border-bottom: 0.267vw solid #f4f4f4;
                .img{
                    width: 16.8vw;
                    height: 5.333vw;
                }
                .main-name{
                    background: linear-gradient(-248deg,#ffebcf 2%,#ffecdd 61%);
                    color: #b15e2c;
                    width: 35.733vw;
                    height: 5.333vw;
                    font-size: 3.2vw ;
                    padding: 0 1.6vw;
                    line-height: 5.333vw;
                }
            }

            .business-hours{
                display: flex;
                height: 4vw;
                font-size: 3.467vw;
                line-height: 4vw;
                margin: 3.733vw 0 2.667vw   0;
                .rx{
                    margin-left: 20vw;
                }
                .rest{
                    margin-right: 3.467vw;
                }
                .time{
                    margin-right: 2.4vw;
                }
            }

            .include{
                display: flex;
                height: 5.067vw;
                font-size: 3.2vw;
                line-height: 5.067vw;
                text-align: center;
                margin-bottom: 2.4vw;
                .left{
                    display: flex;
                    justify-content: space-between;
                    width: 59.733vw;
                }
                .include-three{
                    display: flex;
                }
                .three{
                    width: 5.067vw;
                    background: #fca94f;
                    color: #ffffff;
                }
                .threes{
                    background: #fdf1ea;
                    color: #f5a041;
                    font-size: 3.2vw;
                    width: 14.667vw;
                }
                .food{
                    width: 9.6vw;
                    background: #f6f5f6;
                }
                .thing{
                    width: 9.867vw;
                    background: #f6f5f6;
                }
                .pet-shop{
                    width: 16vw;
                    background: #f6f5f6;
                }
            }

            .location{
                display: flex;
                justify-content: space-between;
                border-top: 0.267vw solid #f4f4f4;
                .left{
                    font-size: 3.467vw;
                    .one{
                        color: #0d0d0d;
                        margin: 3.467vw 0 1.133vw 0;
                    }
                    .two{
                        color: #6b6b6b; 
                    }
                }
                .right{
                    .phone{
                        color: #888a89;
                        font-size: 2.667vw;
                    }
                    img{
                        width: 4.8vw;
                        margin-top:3.467vw
                    }
                }
               
            }
        }
    }
    body{
        background:#ffffff; 
    }

    .divide{    
        background: #e6e6e8;
        width: 100vw;
        height: 2.667vw;
    }

    .asks{
        height: 16.667vw;
        font-size: 3.467vw;
    }
    .ask{
          height: 8vw;
          img{
              width: 1.6vw;
              height: 3vw;
            }
        }  
           
    ::v-deep .van-swipe__indicators{
        display: none
    }

   
    // 进入频道
    .channel{
        height: 48vw;
        background: #eae9ee;
        display: flex;
        .content{
            background: #ffffff;
            height: 42.667vw;
            border-radius: 2.667vw;
            display: flex;
            .contents{
                width: 89.4vw;
                height: 34.667vw;
                margin: auto;
                .top{
                    border-bottom: 1px solid #eee;
                    line-height: 8.5vw;
                    img{
                        width: 5.867vw;
                    }
                    .pet-text{
                        font-size: 4.8vw;
                    }
                    .science{
                        font-size: 2.933vw;
                        color: #5a5a5a;
                    }
                }

                .middle{
                    margin-top: 4vw;
                    .middle-tx{
                        display: flex;
                        align-items: center;
                        img{
                            width: 5.333vw;
                        }
                        .bottoms{
                            margin-left: 0.933vw;
                            h4{
                                font-size: 3.467vw;
                            }
                            p{
                                font-size: 3.2vw;
                                color: #5a5a5a;;
                                margin-top: 0.533vw;
                            }
                        }
                    }
                   
                }   
            }   
        }
    }

        ::v-deep .van-button{
            width:89.4vw;
            border-radius:4.8vw ;
            height: 9.6vw;
            margin-top: 2.133vw;
            border:2px solid #c5c5c5;
        }

    .bottom-bar{
        height: 13.333vw;
    }

   
  

</style>
